vue，基于element的tree组件封装 |
您所在的位置：网站首页 › 复选框 check 被选中 则其value属性的值是 › vue，基于element的tree组件封装 |
vue，基于element的tree组件封装
|
封装组件代码 // 组件：树 /* 参数说明-属性： 1.treeData：展示数据（array） 2.treeEmptyText:内容为空的时候展示的文本(String) 3.treeNodeKey：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的(String) 4.treeRenderAfterExpand:是否在第一次展开某个树节点后才渲染其子节点(boolean) 5.treeHighlightCurrent:是否高亮当前选中节点，默认值是 false(boolean) 6.treeDefaultExpandAll:是否默认展开所有节点(boolean) 7.treeExpandOnClickNode:是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点(boolean) 8.treeCheckOnClickNode:是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。(boolean) 9.treeDefaultExpandedKeys:默认展开的节点的 key 的数组(array) 10.treeShowCheckbox:节点是否可被选择(boolean) 11.treeCheckStrictly:在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false(boolean) 12.treeDefaultCheckedKeys:默认勾选的节点的 key 的数组(array) 13.treeAccordion:是否每次只打开一个同级树节点展开(boolean) 14.treeIndent:相邻级节点间的水平缩进，单位为像素(number) 15.treeIconClass:自定义树节点的图标(string) 16.treeFilterText：对树节点进行筛选操作(string) 17.treeNodeClickFunName:节点点击回调函数的函数名（示例：@trNodeClick="treeNodeClick" treeNodeClickFunName="trNodeClick"） 返回参数：s：有复选框时，选中节点的信息, a：点击节点在data中对应的对象, b：节点对应的 Node 18.treeCheckChangeFunName:节点选中状态发生变化时的回调函数的函数名（示例：@trCheckChange="treeCheckChange" treeCheckChangeFunName="trCheckChange"） 返回参数：a：传递给 data 属性的数组中该节点所对应的对象, b：节点本身是否被选中, c：节点的子树中是否有被选中的节点 说明：现在返回参数报错（TypeError: Cannot read property 'toLowerCase' of undefined）不知道啥原因，暂时不返回 19.treeCheckFunName:当复选框被点击的时候触发回调函数的函数名（示例：@trCheck="treeCheck" treeCheckFunName="trCheck"） 返回参数：a:传递给 data 属性的数组中该节点所对应的对象 b:树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 参数说明-事件： 1.node-click:节点被点击时的回调(共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。) 2.check-change：节点选中状态发生变化时的回调（共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点） 3.check：当复选框被点击的时候触发（共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性） */ export default { props: { treeData: { type: Array }, treeEmptyText: { type: String, default: '暂无数据' }, treeNodeKey: { type: String }, treeRenderAfterExpand: { type: Boolean, default: true }, treeHighlightCurrent: { type: Boolean, default: false }, treeDefaultExpandAll: { type: Boolean, default: false }, treeExpandOnClickNode: { type: Boolean, default: true }, treeCheckOnClickNode: { type: Boolean, default: false }, treeDefaultExpandedKeys: { type: Array }, treeShowCheckbox: { type: Boolean, default: false }, treeCheckStrictly: { type: Boolean, default: false }, treeDefaultCheckedKeys: { type: Array }, treeAccordion: { type: Boolean, default: false }, treeIndent: { type: Number, default: 16 }, treeIconClass: { type: String }, treeFilterText: { type: String }, treeNodeClickFunName: { type: String }, treeCheckChangeFunName: { type: String }, treeCheckFunName: { type: String } }, data () { return { defaultProps: { children: 'children', label: 'label' } } }, methods: { filterNode (value, data) { if (!value) return true return data.label.indexOf(value) !== -1 }, nodeClick (a, b, c) { if (!this.treeNodeClickFunName || this.treeNodeClickFunName === '') return let s = this.$refs.modelTree.getCheckedNodes() this.$emit(this.treeNodeClickFunName, s, a, b) }, checkChange (a, b, c) { if (!this.treeCheckChangeFunName || this.treeCheckChangeFunName === '') return this.$emit(this.treeCheckChangeFunName, a, b, c) }, check (a, b) { if (!this.treeCheckFunName || this.treeCheckFunName === '') return this.$emit(this.treeCheckFunName, a, b) } }, computed: {}, mounted: function () { }, watch: { treeFilterText (val) { this.$refs.modelTree.filter(val) } } }父组件调用方式： 引入方式： import componentsTree from '@/utils/Tree/Tree' components: { componentsTree } data () { return { treeData: [ { id: 1, label: '名士豪庭', children: [ { id: 4, label: '1号楼', children: [ { id: 9, label: '名士豪庭-李四', type: 'person' }, { id: 10, label: '名士豪庭-王五', type: 'person' } ] }, { id: '1_4', label: '2号楼', children: [ { id: '1_4_9', label: '名士豪庭-大胖胖', type: 'person' }, { id: '1_4_10', label: '名士豪庭-栗瀚昂', type: 'person' } ] } ] }, { id: 2, label: '金石晶城', children: [ { id: 5, label: '3号楼', children: [ { id: '2_5_9', label: '金石晶城-卞雨梅', type: 'person' }, { id: '2_5_10', label: '金石晶城-益振华', type: 'person' } ] }, { id: 6, label: '5号楼' } ] }, { id: 3, label: '黄金国际', children: [ { id: 7, label: '2号楼' }, { id: 8, label: '5号楼', children: [ { id: '3_8_9', label: '黄金国际-阮嘉志', type: 'person' }, { id: '3_8_10', label: '黄金国际-谷梁静曼', type: 'person' } ] } ] } ], treeEmptyText: '暂无数据1', treeNodeKey: 'id', treeRenderAfterExpand: true, treeHighlightCurrent: true, treeDefaultExpandAll: true, treeExpandOnClickNode: false, treeCheckOnClickNodes: false, treeDefaultExpandedKeys: [1, 3], treeShowCheckbox: true, treeCheckStrictly: false, treeDefaultCheckedKeys: [], treeAccordion: true, treeIndent: 9, treeIconClass: '' } }展示效果：
|
【本文地址】
今日新闻 |
推荐新闻 |